<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ_02</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#b1").click(function () {
                $("div").addClass("d2");
            })
            $("#b2").click(function () {
                $("div").toggleClass("d2");
            })
            $("#b3").click(function () {
                alert($("div").hasClass("d2"));
            })
            $("#b4").click(function () {
                $("div").removeClass("d2");
            })



        });

    </script>
    <style>
        #d1{
            border: #01db04 2px solid;
            height: 200px;
            width: 100px;
        }
        .d2{
            border-radius: 100%;
            color: #0066B3;
            font-size: 30px;
        }

    </style>
</head>
<body>
<div id="d1">
    <span>line line so easy,day day no bug.</span>
</div>
<p>
    <input id="b1" type="button" value="增加样式">
    <input id="b2" type="button" value="toggle样式">
    <input id="b3" type="button" value="判断样式">
    <input id="b4" type="button" value="移除样式">
</p>


</body>
</html>